<template>
    <div>
        <el-container style="min-height: 100vh;">
            <el-aside :width="$store.state.sideWidth + 'px'"
                style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
                <MyAsides :menus="menus"/>
            </el-aside>
            <el-container>
                <el-header>
                    <MyHeader :user="user"/>
                </el-header>
                <el-main style="padding-top: 8px;">
                    <router-view @refreshUser="getUser" />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import MyAsides from '../components/MyAsides.vue'
import MyHeader from '../components/MyHeader.vue'
export default {
    name: 'Manage',
    data() {
        return {
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : {}
        }
    },
    components: { MyAsides, MyHeader },
    methods: {
        getUser(){
            const that = this;
            this.$axios.get('/user/user', {
                params: {
                    id: that.user.id  
                }
            })
                .then(function (response) {
                    that.user = response.data; 
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
}
</script>

<style>
.el-aside::-webkit-scrollbar {
    display: none;
}
</style>